'

Create a single HTML document that presents two different appearances, determined by the document\'s CSS stylesheet. Your HTML file should be called p1.html and the two stylesheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css then it should appear like this ("Version A"), assuming you are running Chrome 70.0 on a Windows 10 machine: The additional details and requirements for the problem are: • The content should be described in a single HTML file, using a <table> element to display the main table. • There may not be any formatting information in the HTML file other than class and id attributes. • The appearance must be generated entirely with CSS style information; you may not use images or JavaScript for this problem. • The only change that should be required to switch from Version A to Version B is to change the <link> element in the header to refer to a different CSS file. • Your CSS files must appear in a directory called styles/. Try to duplicate the appearance in the images above exactly ("pixel perfect"). For example: o Some of the columns should be centred whereas others are left-justified. o The "Total" line appears only in Version B (hint: you may find the display attribute useful in producing this effect). o The title in the browser title bar should read "COMP6100 Project, Part 1". o Both versions use the Verdana font with a size that is 1.1 times the width of an ‘m’ o The background colour for the header row in Version A is #687291. o The background colours for the body rows in Version A are #eeeff2 and #dfe1e7. o The white lines between rows in Version A are 1 pixel wide. o The colour for the frame around Version B is #d0d0ff. o The frame in Version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame. o The horizontal rule above the "Total" line in Version B is 2 pixels wide. o Match the paddings and spacings as closely as possible. • The tables should be fixed-size (i.e. they should not expand and contract as the window size changes). • The HTML file must be a valid XHTML document that passes validation at http://validator.w3.org, and your CSS files must pass validation at http://jigsaw.w3.org/css-validator/ • Note: the border and margin styles are not supported for <tr> elements; <td> elements support border but not margin.